<template>
  <el-container>
    <el-header>
      <div class="lt">智能管控云平台</div>
      <div class="rt">
        <ul class="date">
          <li>{{ date }}</li>
          <li>{{ time }}</li>
        </ul>
        <div id="he-plugin-simple"></div>
      </div>
    </el-header>
    <el-main class="main"><router-view></router-view></el-main>
    <el-footer>
      <ul class="footer">
        <li><a href="#/zonghe">综合信息</a></li>
        <li><a href="#/xianchang">现场管控</a></li>
        <li><a href="#/status">状态预测</a></li>
        <li><a href="#/data">视觉大数据</a></li>
      </ul>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      //时间
      time: "",
      // 年月日的字符串
      date: "",
      loading: true,
      weatherdata: "",
    };
  },
  methods: {
    // 获取当前时间
    getTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let week = date.getDay();
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      this.time = hour + ":" + minute + ":" + second;
      this.date = year + "年" + month + "月" + day + "日" + " " + weeks[week];
    },
    // 获取天气数据
    getWeather() {
      let that = this;
      let url =
        "http://hn216.api.yesapi.cn/api/App/Common_Weather/LiveWeather?return_data=0&city=%E5%90%89%E6%9E%97&app_key=800BC868F24C108EADEA1235EE2DE420&sign=82D154D7C8E7E68E45509301700BD120http://hn216.api.yesapi.cn/api/App/Common_Weather/LiveWeather?return_data=0&city=%E5%90%89%E6%9E%97&app_key=800BC868F24C108EADEA1235EE2DE420&sign=82D154D7C8E7E68E45509301700BD120";
      axios.get(url).then(function (res) {
        that.weatherdata = res.data;
        console.log(that.weatherdata);
        that.loading = false;
      });
    },
  },
  mounted() {
    this.getTime();
    // this.getWeather();
    setInterval(() => {
      this.getTime();
    }, 1000);
    // 天气组件
    window.WIDGET = {
      CONFIG: {
        modules: "01234",
        background: "1",
        tmpColor: "FFFFFF",
        tmpSize: "16",
        cityColor: "FFFFFF",
        citySize: "16",
        aqiColor: "FFFFFF",
        aqiSize: "16",
        weatherIconSize: "24",
        alertIconSize: "18",
        padding: "10px 10px 10px 10px",
        shadow: "1",
        language: "auto",
        borderRadius: "15",
        fixed: "true",
        vertical: "top",
        horizontal: "left",
        right: "0",
        top: "0",
        key: "fc3b890101e1418ea7a777cfc07d960a",
      },
    };
    let script = document.createElement("script");
    script.src =
      "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
    document.getElementsByTagName("head")[0].appendChild(script);
  },
};
</script>

<style lang="less" scoped>
.el-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 5% !important;
  text-align: center;
  font-size: 1vw;
  color: #fff;
  line-height: 2.5vw;
}
.lt {
  float: left;
}
.rt {
  float: right;
}
.date {
  margin-right: 10vw;
  li {
    float: left;
    margin-right: 1vw;
  }
}

.el-main {
  position: fixed;
  top: 5%;
  height: 90% !important;
  width: 100%;
}

.el-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 5% !important;
  font-size: 1.2vw;
  color: #fff;
  line-height: 2;
}
.footer {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  li {
    float: left;
    margin: 0px 1vw;
    a {
      margin: 0px;
      padding: 0px;
      border: 0px;
      display: block;
      height: 50%;
      width: 9vw;
      background: url(../assets/images/bt1.png);
      background-size: 100% 100%;
      color: #fff;
      text-align: center;
      font-size: 1.2vw;
      line-height: 2;
    }
    a:hover {
      background: url(../assets/images/bt2.png);
      background-size: 100% 100%;
    }
  }
}
</style>
